import {Col, Row, Spin} from "antd";
import React, {useEffect, useRef, useState} from "react";
import {LdhButton, LdhForm, LdhFormItem, LdhTable} from "./Components";
import GUtils from "@/utils";
import classNames from "classnames";

const LdhSearchItem =(props)=>{
    let {span=6, ...rest} = props;
    return <Col span={span}>
        <LdhFormItem {...rest}></LdhFormItem>
    </Col>
}
const LdhPage = (props)=>{
    let {custom, title, children, className} = props;
    if(!title){

        let [path, status] = GUtils.getUrlPath();
        let menu = (window.MENU_PATH_MAP || {})[path] ||{};
        title = [menu.name, window.ENUMS.DetailStatus[status]].filter(e=>e).join(" - ");

    }
    return <div className={`ldh-page ${className}`}>
        {custom}
        <div className="page-title">{title}</div>
        {children}
    </div>
}

const LdhPageBody = ({children, className})=>{
    return  <div className={classNames("page-body",className)}>
        {children}
    </div>
}

const LdhDetailPage = (props)=>{
    let {title, className, children} = props;
   return  <LdhPage className={className} title={title}>
        <LdhPageBody className="detail">
            {children}
        </LdhPageBody>
    </LdhPage>
}
const LdhPageTable = (props)=>{
    let {config,store, ...rest} = props;
    let {columns} = config;
    let {pagination, voList=[], loading}= store;

    //console.log(columns, voList);
    const ref = useRef();
    const [height, setHeight] = useState(0);
    const dealHeight = ()=>{
        ref.current && setHeight(ref.current.clientHeight-120);
    }
    useEffect(()=>{
        ref.current && setHeight(ref.current.clientHeight-20);
    },[])

    GUtils.on(window,"resize",dealHeight)

    return <div className="table-content" ref={ref}>
        <LdhTable loading={loading} columns={columns} rowKey="id" scroll={{y: height}} dataSource={voList} pagination={pagination} {...rest}/>
    </div>
}

const LdhSearchForm = React.forwardRef((props, ref)=>{
    let {onSearch, onReset, loading, children} = props;
    return <LdhForm ref={ref}  className="page-search" onFinish={onSearch} labelCol={{span:8}} wrapperCol={{span:16}} layout="horizontal">
        <Row gutter={20}>
            {children}
            <Col span={6} className="flex-between page-search-col">
                <LdhButton htmlType="submit" type="primary" loading={loading}>查询</LdhButton>
            </Col>
        </Row>
    </LdhForm>
});

const LdhPageControl = (props)=>{
    let {children} = props;
    return <div className="page-control flex-between">
        {children}
    </div>
}

const LdhDetailForm = React.forwardRef((props, ref)=>{
    let {onSubmit, loading, isDetail, children, ...rest} = props;
    return <Spin spinning={loading}>
        <LdhForm ref={ref} className="page-detail-form" onFinish={onSubmit} {...rest}>
            {children}
        </LdhForm>
    </Spin>
});

const LdhFieldSet = (props)=>{
    let {title,subTitle, btn,custom, children, loading} = props;
    return <div className="page-field-set">
        <div className="set-title flex-between">
            <div>
                {title}
                <span className="sub-title">{subTitle}</span>
            </div>
            {custom}
            {btn && <LdhButton type="primary" htmlType="submit" loading={loading}>保存</LdhButton>}
        </div>
        <div className="set-body">
            {children}
        </div>
    </div>
}

const LdhStatusBar = (props)=>{
    let {list, value, onChange, ...rest} = props;
    return <div className="status-bar">
        {list.map(o => <div key={o.value} className={classNames(value==o.value && "active")}
                            onClick={onChange.bind(this, o.value)}>{o.label} ({o.count})</div>)}
    </div>
}
const LdhFormItemValue = (props)=>{
    let {isDetail,value, children} = props;
    return isDetail ? <div>{value}</div> : children;
}
export {
    LdhPage,
    LdhPageBody,
    LdhDetailPage,
    LdhSearchForm,
    LdhSearchItem,
    LdhPageControl,
    LdhPageTable,
    LdhStatusBar,
    LdhDetailForm,
    LdhFieldSet,

}